import { InterHolographic } from 'datau-chart';
import React from 'react';
function myReactComponent(props){
    const pluginData = InterHolographic.utils.getStreetsData({streets: props.data.data.streets})
    console.log(999,pluginData)
    return (
      <div>
        <InterHolographic
          width={props.data.width}
          height={props.data.height}
          background={ 'rgba(184, 184, 184,0.0)' }
          panZoomConfig={{ 
            defaultZoom: props.data.zoom,  
          }}
          roadStyles={
            { 
              fontSize: 30,
              textColor: '#FFF',
              lane:{ //车道
                choose: { //选中状态（高亮）
                  color: props.data.data.chooseColor || "#000" //车道颜色
                }
              }
            }
          }
          queueStyles={{
            queueLenAreaLength: 875,
            maxQueueLen: 875,
            color: [
              {offset: "0%", color: "#820707"}, 
              {offset: "100%", color: "rgba(255,51,102,0.50)"}
            ]
          }}
          data={{
            streets: props.data.data.streets,
            
            selectLaneIds: props.data.data.selectLaneIds || [],
            // center:{x: 0.5, y: 0.6}
          }}
          // isShowPhase={true}
          isEditIns={true}
          isEditOut={true}
        >
          {/* <InterHolographic.Plugin origin='cross' coordinate={{ x: 0, y: 0 }} rotateadjust='0'>
            <div style={{width: 'max-content'}}  id='test'>
              <div className={classI+ ' '+'reactIcon'}>{value}</div>
            </div>
          </InterHolographic.Plugin> */}
          {
            pluginData.map((item, index) => {
              const { ins } = item
              console.log(ins)
              return ins.map((v,i) => {
                return !v.nonMontor &&(
                  <InterHolographic.Plugin key={`${index}_${i}`} origin={`ins_${index}_${i}`} coordinate={{ x: 0, y: -70 }} rotateadjust={0}>
                    <div style={{width: 'max-content'}} id={`ins_${index}_${i}`}>
                      {/* <div style={{color: '#fff',fontSize:16 }}>{v.laneId == '14LRU0978O014LRQ0978V0099911' ? '可变车道' : `进口道${i+1}`}</div> */}
                      <div style={{color: '#fff',fontSize:16}}>进口道{i+1}</div>
                    </div>
                  </InterHolographic.Plugin>
                )
              })
            })
          }
          {
            pluginData.map((item, index) => {
              const { ins, outs } = item
              const datas = new Array(outs).fill(1)
              return datas.map((v,i) => {
                return i && (
                  <InterHolographic.Plugin key={`${index}_${i}`} origin={`out_${index}_${i}`} coordinate={{ x: 0, y: -70 }} rotateadjust={0}>
                    <div style={{width: 'max-content'}} id={`out_${index}_${i}`}>
                      <div style={{color: '#fff',fontSize: 16}}>出口道{i}</div>
                    </div>
                  </InterHolographic.Plugin>
                )
              })
            })
          }
        </InterHolographic> 
      </div>
    )
  }
  export default myReactComponent